<!DOCTYPE html>
<html lang="zh">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="utf-8"/>
    <title>title</title>

</head>
<body>
    <div id="app">
        <text-show text="this will show"></text-show>
        <test-cpn>
            <text-show ></text-show>
        </test-cpn>
        <test-cpn>
            <text-show slot-scope="so" v-bind="so" :text="'now it will show: ' + so.text"></text-show>
        </test-cpn>
    </div>

    <script type="text/javascript" src="../vue-2.5.17/dist/vue.js"></script>
    <script>
        Vue.component('test-cpn', {
            template: `
                <div>
                    <slot text="this will not show" ></slot>
                </div>
            `,
            created: function() {
                var vm = this;
                vm.$nextTick(function() {
                    console.log(vm, vm.$refs.xxx);
                })
            }
        });
        Vue.component('text-show', {
            props: ['text'],
            template: `
                <p>{{text}}</p>
            `
        });
        var vm = new Vue({
            el: '#app',
        });
    </script>
</body>
</html>